<template>
    <div id="customerReviews"  @touchstart.stop='isInput=false'>
        <header>
            <i @click="goBack()"></i>
            <div>客户评价</div>
        </header>
        <div class='input' v-show='isInput' @touchstart.stop='isInput=true'>
            <input type="text" placeholder="回复评价" v-model='obj.reply'>
            <a @click='subReply'>提交</a>
        </div>
        <div class='border10'></div>
        <ul class="list">
            <Loadmore
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded" 
                ref="loadmore"
                :autoFill="false">
                <div class='mc' v-if="list.length<1">
                    <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
                    <p>暂无数据!</p>
                </div>
                <li v-for='(item,index) in list' :key='index' v-if="list.length>0">
                    <div class="name">
                        <h4>{{item.clinicname}}</h4>
                        <i>{{item.time}}</i>
                    </div>
                    <el-rate
                        v-model="item.grade*1"
                        disabled
                        text-color="#ff9900"
                        score-template="{value}"
                        :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                        :disabled="true">
                    </el-rate>
                    <p class='content'>
                        {{item.content}}
                    </p>
                    <div class='replyBtn' v-show='!item.reply'>
                        <a class='reply' @touchstart.stop='replayComment(item.id)'>回复</a>
                    </div>
                    <div class='reply' v-show='item.reply'>
                        <span class='before'>
                            回复:
                        </span>
                        <span class='content'>
                            {{item.reply}}
                        </span>
                    </div>
                </li>
            </Loadmore>
        </ul>
    </div>
</template>
<script>
    import {Loadmore} from 'mint-ui';
    export default {
        data() {
            return {
                list: [],
                sentPage:{
                    page : 1,//分页累加
                },//接口入参
                totalNum: 0, //总数据条数
                allLoaded: false,	
                value5: 4,
                isInput: false,  //是否显示回复输入框
                obj: {
                    // clinicid: '',
                    id: '',  //评价id
                    reply: '', //回复评价内容
                }
            }
        },
        components: {
            Loadmore
        },
        computed: {
            
        },
        methods: {
            //返回上一级
            goBack() {
                this.$router.push({name:'ImDoctor'});
            },
            init() {
                if(localStorage.getItem("loginMobile")) {
                    this.obj.clinicid = localStorage.getItem("loginMobile");
                }
            },
            // 获取评价列表
            getList(params) {
                this.$api.post(this.$api.baseURLSchool,"selecttype_view/view_doctor_comment_user/0?doctorid="+this.obj.clinicid,params,r => {
                    this.totalNum = r.data.records;
                    if(this.sentPage.page==1) {
                        this.list = r.data.rows;
                    }else {
                        this.list = this.list.concat(r.data.rows);
                    }
                    if(r.data.rows.length == 0&&this.sentPage.page>1) {
                        this.$utils._toast("暂无更多评价");
                    }
                    if(this.totalNum == this.list.length) {
                        this.allLoaded = true;
                    }
                },err => {
                    console.log(err);
                })
            },
            //上拉加载
            loadBottom() {
                (this.sentPage.page)++;
                setTimeout(() => {
                    this.getList(this.sentPage);
                }, 20);
                if(this.totalNum == this.list.length) {
                    this.allLoaded = true;
                }
                this.$refs.loadmore.onBottomLoaded();
            },
            //点击回复客户评价
            replayComment(id) {
                if(this.isInput) {
                    this.isInput = false;   
                }else {
                    this.obj.id = id;
                    this.isInput = true;
                }   
            },
            //提交回复的评价
            subReply() {
                if(this.obj.reply) {
                    this.$api.post(this.$api.baseURLSchool,"updatedata/doctor_comment/edit",this.obj,r => {
                    if(r.data.ret == 1) {
                        this.$utils._toast("回复成功");
                        this.isInput = false;
                        this.getList(this.sentPage);
                    }
                },err => {
                    console.log(err);
                })
                } else {
                    this.$utils._toast('回复不可为空');
                }
            }
        },
        created() {
            this.init();
            this.getList(this.sentPage);
        }
    }
    
</script>
<style lang="scss" scoped>
    .mc {
        padding: 40px 0;
        margin: auto;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%,-50%);
        img {
            display: block;
            margin: 0 auto;
        }
        p {
            padding-top: 10px;
            text-align: center;
        }
    }

</style>